<template>
    <el-row class="container" :gutter="24">
      <el-col :span="11" ref="updataimg">
        <el-card class="box-card content-background" id="posterHtml" :style="{'fontFamily':setting.fontFamily,'fontSize': setting.fontSize,'color':setting.fontColor,'backgroundColor':setting.backgroundColor}">
            <div class="page-container">
                <!-- :style="{}" ,'background':linear-gradient(#55efc4,#a29bfe) -->
                <div class="left-content">
                    <div class="fontBox" :class="{'lines':checked==true?true:false}" contenteditable="true" @paste="onPaste">
                    {{ textarea }}
                </div>
            </div>
         </div>
        </el-card>
        <!-- <div class="btnBox mt20">
            <el-button type="primary" @click="downImgage">下载图片</el-button>
        </div> -->
      </el-col>
      <el-col :span="13">
        <el-row>
            <el-col>
                <el-card class="box-card">
                    <el-divider>字体、颜色、背景</el-divider>
                    <el-col class="df">
                        <div>
                            <span>字体：</span>
                            <el-select v-model="setting.fontFamily" placeholder="请选择" size="small">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                        <div class="df">
                            <span>颜色：</span>
                            <el-color-picker size="small" v-model="setting.fontColor" show-alpha :predefine="predefineColors"/>
                        </div>
                        <div class="df">
                            <span>背景：</span>
                            <el-color-picker size="small" v-model="setting.backgroundColor" show-alpha :predefine="predefineColors"/>
                        </div>
                    </el-col>
                    <el-col class="df mt20 pb20">
                       <span>字号：</span>
                       <el-select v-model="setting.fontSize" placeholder="请选择" size="small">
                            <el-option v-for="item in fontSizes" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="mt20">
            <el-col>
                <el-card class="box-card">
                <el-divider>字体设置</el-divider>
                <el-checkbox v-model="checked">是否显示行数</el-checkbox>
                </el-card>
            </el-col>
            <div id="testimg"></div>
        </el-row>
    </el-col>
    </el-row>
  </template>

<script>
    import html2canvas from 'html2canvas';

    export default {
        data() {
            return {
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                checked: true,
                setting: {
                    fontFamily: "青春字体",
                    fontColor: '',
                    backgroundColor: '',
                    fontSize: '28px'
                },
                fontSizes: [{
                    value: '20px',
                    label: '20'
                }, {
                    value: '22px',
                    label: '22'
                }, {
                    value: '24px',
                    label: '24'
                }, {
                    value: '26px',
                    label: '26'
                }, {
                    value: '28px',
                    label: '28'
                }, {
                    value: '30px',
                    label: '30'
                }, ],
                textarea: "世事千帆过，前方终会是温柔和月光。希望路过一个花店时，你能停下脚步，买一束自己喜欢的鲜花，让普通的日子变得不普通。感受一束花的芬芳，品尝一口沁入心脾的鲜甜，关注每个当下和日常。希望路过一个花店时，你能停下脚步，买一束自己喜欢的鲜花，让普通的日子变得不普通。感受一束花的芬芳，品尝一口沁入心脾的鲜甜，关注每个当下和日常。希望路过一个花店时，你能停下脚步，买一束自己喜欢的鲜花，让普通的日子变得不普通。感受一束花的芬芳，品尝一口沁入心脾的鲜甜，关注每个当下和日常。希望路过一个花店时，你能停下脚步，买一束自己喜欢的鲜花，让普通的日子变得不普通。感受一束花的芬芳，品尝一口沁入心脾的鲜甜，关注每个当下和日常。希望路过一个花店时，你能停下脚步，买一束自己喜欢的鲜花，让普通的日子变得不普通。感受一束花的芬芳，品尝一口沁入心脾的鲜甜，关注每个当下和日常。",
                options: [{
                    value: '成长纪念册字体',
                    label: '成长纪念册字体'
                }, {
                    value: '日记字体',
                    label: '日记字体'
                }, {
                    value: '郭敬明字体',
                    label: '郭敬明字体'
                }, {
                    value: '青春字体',
                    label: '青春字体'
                }],
                value: ''
            }
        },
        methods: {
            // 只粘贴文字， 不粘贴格式
            onPaste(e) {
                e.preventDefault();
                var text;
                var clp = (e.originalEvent || e).clipboardData;
                if (clp == undefined || clp === null) {
                    text = window.clipboardData.getData("text") || "";
                    if (text !== '') {
                        if (window.getSelection) {
                            var newNode = document.createElement("span");
                            newNode.innerHTML = text;
                            window.getSelection().getRangeAt(0).insertNode(newNode);
                        } else {
                            document.selection.createRange().pasteHtml(text);
                        }
                    }
                } else {
                    text = clp.getData('text/plain') || "";
                    if (text !== '') {
                        document.execCommand('insertText', false, text);
                    }
                }
            },
            downImgage() {
                var domObj = document.getElementById('posterHtml')
                    // window.pageYoffset = 0;
                    // document.documentElement.scrollTop = 0;
                    // document.body.scrollTop = 0;
                    // console.log("domObj", domObj.scrollHeight)
                    // var cloneDom = this.$refs.updataimg;
                    // let height = cloneDom.offsetHeight; // 获取内容高度
                    // console.log(cloneDom.scrollWidth, cloneDom.scrollHeight)
                setTimeout(() => {
                    html2canvas(domObj, {
                        useCORS: true,
                        // scale: 2,
                        allowTaint: false,
                        logging: false,
                        letterRendering: true,
                        width: domObj.scrollWidth,
                        height: domObj.scrollHeight,
                        onclone(doc) {
                            let e = doc.querySelector('#posterHtml')
                            e.style.display = 'block'
                        }
                    }).then(function(canvas) {
                        let img = new Image();
                        const imgUrl = canvas.toDataURL("image/jpeg");
                        img.src = imgUrl;
                        let a = document.createElement('a');
                        a.href = imgUrl;
                        a.download = "testimg";
                        a.click();
                        document.body.removeChild(cloneNode); //最后记得移除截图时添加的
                    })
                }, 500);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .df {
        display: flex;
        align-items: center;
    }
    
    .container {
        padding: 12px;
    }
    
    .mt20 {
        margin-top: 20px;
    }
    
    .pb20 {
        padding-bottom: 20px;
    }
    
    .btnBox {
        width: 100%;
        text-align: center;
        button {
            width: 100%;
        }
    }
</style>
<style>
    @import './../assets/font/font.css';
    .fontBox {
        padding: 10px 0;
        margin-top: 20px;
        /* padding-left: 24px; */
        line-height: 1.4em;
        min-height: 40px;
        /* font-size: 26px; */
    }
    /* .content-background {
        background: url(./../assets/1.jpeg) no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
    } */
    
    .left-content {
        min-height: calc(100% - 30px);
    }
    
    .page-container {
        height: calc(11.7 * 446px / 8.3);
        overflow-y: auto;
    }
    
    .el-card__body {
        padding: 26px;
    }
    
    .lines {
        background-image: linear-gradient(#f00 0.05em, transparent 1px);
        background-color: unset !important;
        background-size: 100% 1.4em;
        width: 100%;
        text-indent: 1em;
    }
</style>